<script setup lang="ts">
import { ref, computed } from 'vue'
type poses = 'idle' | 'bye' | 'speak' | 'hello' | 'handup' | 'handdown'
const currentPose = ref<poses>('idle') // 数字人姿态 (替代旧的 currentImage)
const currentImage = computed(() => {
  // 使用 computed 属性动态生成带时间戳的图像 URL，防止缓存问题
  const timestamp = new Date().getTime()
  // 确保你的图像资源放在 public/person/ 目录下，或者相应调整路径
  return `/person/${currentPose.value}.avif?t=${timestamp}`
})
defineExpose({
  toIdle: () => {
    currentPose.value = 'idle'
  },
  toBye: () => {
    currentPose.value = 'bye'
  },
  toSpeak: () => {
    currentPose.value = 'speak'
  },
  toHello: () => {
    currentPose.value = 'hello'
    setTimeout(() => {
      currentPose.value = 'speak'
    }, 2600)
  },
})
</script>
<template>
  <div class="assistant-image">
    <img :src="currentImage" alt="数字人" />
  </div>
</template>
<style scoped>
/* 数字人图像样式 */
.assistant-image {
  position: fixed;
  top: 15vh;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.assistant-image img {
  max-width: 100%;
  width: auto;
  height: 100%;
  object-fit: cover;
}
</style>
